/** 表格编辑：编辑和删除功能
 * Dary
 * 2020-05-13
 */

// 在这里取不到按钮的，因为这里是同步代码，而按钮是异步返回以后创建的，同步比异步先执行
// const btns = document.querySelectorAll('.btn-edit')
// console.log(btns)

// 使用事件委托
// 再index.js里定义的全局变量tbody在这里可以直接使用
// 因为index.js和当前js一起引入在index.html里的，他们公用同一个window
utils.on(tbody, 'click', e => {
    // const arrClass = Array.from(e.target.classList)
    const arrClass = [ ...e.target.classList ]
    const tr = e.target.parentNode.parentNode
    if (arrClass.includes('btn-edit')) {
        tr.classList.add('edit')
        Array.from(tr.querySelectorAll('span')).forEach(span => {
            span.nextElementSibling.value = span.innerHTML
        })
    } else if (arrClass.includes('btn-ok')) {
        // 确定按钮
        const id = tr.getAttribute('data-id')
        const name = tr.querySelector('.input-name').value
        const price = tr.querySelector('.input-price').value
        const num = tr.querySelector('.input-num').value

        utils.fetch('./api/shop/update.php', { id, name, price, num }).then(resp => {
            console.log(resp)
            if (resp.code === 200) {
                tr.classList.remove('edit')
                Array.from(tr.querySelectorAll('span')).forEach(span => {
                    span.innerHTML = span.nextElementSibling.value
                })
            }
        })
    } else if (arrClass.includes('btn-cancel')) {
        // 取消按钮
        // 数据不需要任何修改，只需要恢复样式即可
        tr.classList.remove('edit')
    } else if (arrClass.includes('btn-del')) {
        // 删除按钮
        // 带上id请求接口在数据库里删除
        if (confirm('确定要删除吗？')) {
            const id = tr.getAttribute('data-id')
            utils.fetch('./api/shop/delete.php', { id }).then(resp => {
                if (resp.code === 200) {
                    // tr.remove() // 如果直接remove会导致编号不连续
                    getData()
                }
            })
        }
    }
})